import 'package:flutter/material.dart';


class ChoiceChipWidget extends StatefulWidget {
  final String text;
  final double height;
  final EdgeInsetsGeometry padding;
  final double fontSize;
  final Color textColor;
  final Color boxColor;
  final Color textSelectColor;
  final Color boxSelectColor;
  final BorderRadiusGeometry borderRadius;
  final BoxBorder border;
  final BoxBorder selectBorder;
  final ValueChanged<bool> onSelected;
  final bool selected;
  final bool hasbagenum;
  final String bagenum;

  const ChoiceChipWidget(
      {@required this.text,
        this.height = 30,
         this.hasbagenum = false,
         this.bagenum = "0",
        this.padding =
        const EdgeInsets.only(left: 10, top: 6, right: 10, bottom: 5),
        this.fontSize = 14,
        this.textColor = const Color(0xFF535353),
        this.boxColor = const Color(0xFFFFFFFF),
        this.borderRadius = const BorderRadius.all(Radius.circular(5)),
        this.border = const Border.fromBorderSide(BorderSide(
            color: Color(0xFF535353), width: 1, style: BorderStyle.solid)),
        this.selectBorder = const Border.fromBorderSide(BorderSide(
            color: Color(0xFF23B38E), width: 1, style: BorderStyle.solid)),
        this.onSelected,
        this.selected,
        this.textSelectColor = const Color(0xFF23B38E),
        this.boxSelectColor = const Color(0xFFFFFFFF)});


  @override
  State<StatefulWidget> createState() {
    return _ChoiceChipWidgetState();
  }
}

class _ChoiceChipWidgetState extends State<ChoiceChipWidget> {
  @override
  Widget build(BuildContext context) {
    bool _select = widget.selected;

    return GestureDetector(
      onTap: () {
        widget.onSelected(!_select);
      },
      child:
      
      // Stack(
        
      //   children:[
      //     Positioned(
      //       right: -14,
      //       top: -15,
            

      //       child: Text("30",style: TextStyle(color: Colors.red),)),

       Container(
         decoration: new BoxDecoration(
              color: _select ? widget.boxSelectColor : widget.boxColor,
              borderRadius: widget.borderRadius,
              border: _select ? widget.selectBorder : widget.border
              ),
          height: widget.height,
         // width: 120,
         // padding: widget.padding,


          child: 
          //_select?
          new Stack(
              // alignment: const FractionalOffset(1, 0),
              children: <Widget>[
                new
                
                 Container(
                   padding: widget.padding,
                   height: widget.height,
                  // width:120,
                  child: 
                 
                  Text(
                    widget.text,
                    textAlign: TextAlign.center,
                    style: new TextStyle(
                        fontSize: widget.fontSize,
                        color:_select?  widget.textSelectColor:widget.textColor),
                  
                ),
                ),
          //       bagenum>0 ? Positioned(child: Container(
          //  child:Center(child: Text("${bagenum}",style: TextStyle(fontSize:11,color:Colors.white),)),
          //   width: 14,height: 14,
          //   decoration: BoxDecoration(
          //     color: Colors.red,
          //      borderRadius: BorderRadius.circular(7.0),
          //   ),
          // ),right: 0,top:0):Container(width: 0,),
              widget.hasbagenum? 
              Positioned(child: Container(
           child:Center(child: Text(
             double.parse(widget.bagenum).toStringAsFixed(0),style: TextStyle(fontSize:9,color:Colors.white),)),
            width: 14,height: 14,
            decoration: BoxDecoration(
              color: Colors.red,
               borderRadius: BorderRadius.circular(7.0),
            ),
          ),right: 0,top:0) 
              // Positioned(
              //     right: 0,
              //     top:0,
              //     child: Text(widget.bagenum,style: TextStyle(fontSize:11,color: Colors.red),))
                  
                  :Container(width: 0,)
               
             ])
          // :new Text(
          //   widget.text,
          //   textAlign: TextAlign.center,
          //   style: new TextStyle(
          //       fontSize: widget.fontSize,
          //       color: widget.textColor),
          // ),
          // decoration: new BoxDecoration(
          //     color: _select ? widget.boxSelectColor : widget.boxColor,
          //     borderRadius: widget.borderRadius,
          //     border: _select ? widget.selectBorder : widget.border
          //     )
      )
      //]),
    );
  }
}